<template>
  <div id="app">
   
    <el-menu
  router
  :default-active="$route.path"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#ffffff"
  text-color="#398ab9"
  active-text-color="#F8CB2E"
  >

<div class="demo-image">
    <el-image
      style="width: 45px; height: 45px; float: left;margin-left: 100px;margin-right: 50px;margin-top: 8px;margin-bottom: 3px; border-radius: 50%;"
      :src="url"
      ></el-image>
</div>
<div class="demo-text">
    <p style="float: left;margin-right: 130px;margin-top: 10px;margin-bottom: 3px; font-size:3ch; font-weight: bold; color: #398ab9;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">认证与交易</p>
</div>

  <el-menu-item index="/main" style="font-weight: bold;"> 
      <i class="el-icon-s-home" style="color: #398ab9;"></i>
      首页</el-menu-item>
      
  <el-menu-item index="/explore" style="font-weight: bold;">
       <i class="el-icon-s-shop" style="color: #398ab9;"></i>
      探索</el-menu-item>
  <el-submenu index="/certifyPage" style="font-weight: bold;">
    <template slot="title" >
         <i class="el-icon-upload" style="color: #398ab9;"></i>
        数字资产认证</template>
    <el-menu-item index="/certify">认证数字资产版权</el-menu-item>
  </el-submenu>
  <el-submenu index="4" style="font-weight: bold;">
    <template slot="title">
         <i class="el-icon-s-marketing" style="color: #398ab9;"></i>
        数字资产交易</template>
    <el-menu-item index="/copyrightTrade">版权通证交易</el-menu-item>
  </el-submenu>
    <el-submenu index="5" style="font-weight: bold;">
    <template slot="title">
         <i class="el-icon-s-marketing" style="color: #398ab9;"></i>
        帮助</template>
    <el-menu-item index="/complaint">投诉</el-menu-item>
    <el-menu-item index="/helpDoc">帮助文档</el-menu-item>
  </el-submenu>
  <el-menu-item index="/users" style="font-weight: bold;">
       <i class="el-icon-user-solid" style="color: #398ab9;"></i>
      个人中心</el-menu-item>
</el-menu>
 <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  //在入口文件注册web3和contract
  async beforeCreate() {
    if (!this.$store.state.web3.web3Instance) {
      console.log("registerWeb3 Action dispatched from login.vue");
      await this.$store.dispatch("registerWeb3");
      console.log('dispatching getContractInstance');
      await this.$store.dispatch('getContractInstance');
      console.log('dispatching getContractInstance1');
      await this.$store.dispatch('getContractInstance1');
    }
  },
  mounted() {
    // console.log('dispatching getContractInstance');
    // this.$store.dispatch('getContractInstance');
  },
  data() {
    return {
        url: 'http://127.0.0.1:8080/ipfs/QmeCcUqYmSbq2jpdoaSzid8Npgwz56G5KUnsxFYwTGKwL1'
      };
    },
   methods: {
     handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.el-menu-item.is-active {
      background-color: #276678 !important;
      color: #fff;
      
}
.el-submenu__title:hover{

   background-color: #d8d2c8 !important; 

}


.el-menu-item:hover {

  background-color: #d8d2c8 !important;
 /* height: 55px;
	line-height: 55px; */
}
::v-deep .el-menu-item {
	height: 60px;
	line-height: 60px;
    font-weight: bold;
}
.el-menu{
    box-shadow: 5px 2px 12px 15px rgba(0, 0, 0, 0.1);
}
.el-menu-item{
    box-shadow: 5px 2px 12px 5px rgba(0, 0, 0, 0.1);
}
.el-submenu__title{
     box-shadow: 5px 2px 12px 5px rgba(0, 0, 0, 0.1);
}
</style>
